<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=avIeBSAQQlyadhNQ9vx58K3AaU9hOyyS">
//v2.0版本的引用方式：src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标  
map.centerAndZoom(point, 15);

// 初始化地图，设置中心点坐标和地图级别  
map.enableScrollWheelZoom(true);     
//开启鼠标滚轮缩放
//在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());    
map.setCurrentCity("北京"); 
//位置偏移
// var opts = {offset: new BMap.Size(150, 50)}
// map.addControl(new BMap.ScaleControl(opts));
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 
function addMarker(point, index){  // 创建图标对象   
    var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
        // 指定定位位置。   
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
        // 图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),    
        // 设置图片偏移。   
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
    // 创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}    
// 随机向地图添加10个标注    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
    var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                                  bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
    addMarker(point, i);    
}
marker.addEventListener("click", function(){    
    alert("您点击了标注");    
}); 
marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})   
var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
</script>  
</body>  
</html>